import { lazy } from "react";
import { Navigate } from "react-router-dom";

import LazyLoad from "./LazyLoad";
import Auth from "./Auth";

const Home = lazy(() => import("../pages/home/Index"));
const Detail = lazy(() => import("../pages/detail/Index"));
const City = lazy(() => import("../pages/city/Index"));
const NotFound = lazy(() => import("../pages/notfound/Index"));

const Movies = lazy(() => import("../pages/home/movies/Index"));
const Video = lazy(() => import("../pages/home/video/Index"));
const Mini = lazy(() => import("../pages/home/mini/Index"));
const Show = lazy(() => import("../pages/home/show/Index"));
const Mine = lazy(() => import("../pages/home/mine/Index"));

const Hot = lazy(() => import("../pages/home/movies/hot/Index"));
const Cinema = lazy(() => import("../pages/home/movies/cinema/Index"));
const Wait = lazy(() => import("../pages/home/movies/wait/Index"));
const Classic = lazy(() => import("../pages/home/movies/classic/Index"));

const routes = [
  {
    path: "/",
    element: <Navigate to="/home"></Navigate>,
  },
  {
    path: "/home",
    element: <LazyLoad component={<Home />}></LazyLoad>,
    children: [
      {
        path: "/home",
        element: <Navigate to="/home/movies"></Navigate>,
      },
      {
        path: "movies",
        element: <LazyLoad component={<Movies />}></LazyLoad>,
        children: [
          {
            path: "/home/movies",
            element: <Navigate to="/home/movies/hot"></Navigate>,
          },
          {
            path: "hot",
            element: <LazyLoad component={<Hot />}></LazyLoad>,
          },
          {
            path: "cinema",
            element: <LazyLoad component={<Cinema />}></LazyLoad>,
          },
          {
            path: "wait",
            element: <LazyLoad component={<Wait />}></LazyLoad>,
          },
          {
            path: "classic",
            element: <LazyLoad component={<Classic />}></LazyLoad>,
          },
        ],
      },
      {
        path: "video",
        element: <LazyLoad component={<Video />}></LazyLoad>,
      },
      {
        path: "mini",
        element: <LazyLoad component={<Mini />}></LazyLoad>,
      },
      {
        path: "show",
        element: <LazyLoad component={<Show />}></LazyLoad>,
      },
      {
        path: "mine",
        element: (
          <LazyLoad
            component={
              <Auth>
                <Mine />
              </Auth>
            }
          ></LazyLoad>
        ),
      },
    ],
  },
  {
    path: "/detail/:id",
    element: <LazyLoad component={<Detail />}></LazyLoad>,
  },
  {
    path: "/city",
    element: <LazyLoad component={<City />}></LazyLoad>,
  },
  {
    path: "*",
    element: <LazyLoad component={<NotFound />}></LazyLoad>,
  },
];

export default routes;
